{% extends "base.html" %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ url_for('views.themes', path='css/challenge-board.css') }}">
{% endblock %}

{% block content %}
<div class="jumbotron" style="margin-bottom: 0px;">
	<div class="container">
		<h1><b>{{ 'Challenges' if en else '题目列表' }}</b></h1>
	</div>
</div>

<div class="modal fade" id="challenge-window" tabindex="-1" role="dialog">
</div>

<div class="container" style="max-width:90%;margin-top:-40px;">
	<div class="row">
		<div class="col-md-12">
			{% include "components/errors.html" %}
		</div>
	</div>

    <div class="row" id="timer" hidden>
        <div class="col-md-12">
            <div>
                <div class="alert alert-info alert-dismissable text-center" role="alert">
                    <span id="timer-text"></span>
                </div>
            </div>
        </div>
    </div>
    <script>

        var start = "{{Configs.start}}";
        var end = "{{Configs.end}}";
        var name = "{{Configs.ctf_name}}";
        if (getLanguage() === "en")
        {
            setInterval(function () {
                var current = Date.now();
                current = Math.floor(current / 1000);
                if (current < parseInt(start)) {
                    try {
                        document.getElementById("loading").outerHTML = '';
                    }catch (e)
                    {

                    }
                    var timeRemaining = parseInt(start) - current;
                    var days = Math.floor(timeRemaining / (24 * 60 * 60)); // 计算剩余天数
                    var hours = Math.floor((timeRemaining % (24 * 60 * 60)) / (60 * 60)); // 计算剩余小时数
                    var minutes = Math.floor((timeRemaining % (60 * 60)) / 60); // 计算剩余分钟数
                    var seconds = timeRemaining % 60; // 计算剩余秒数
                    var formattedTime = "";
                    if (days > 0) {
                        if (days >1)
                        {
                            formattedTime += days + " days ";
                        }else
                        {
                            formattedTime += days + " day ";
                        }
                    }
                    if (hours > 0) {
                        if (hours >1)
                        {
                            formattedTime += hours + " hours ";
                        }else
                        {
                            formattedTime += hours + " hour ";
                        }
                    }
                    if (minutes > 0) {
                        if (minutes >1)
                        {
                            formattedTime += minutes + " minutes ";
                        }else
                        {
                            formattedTime += minutes + " minute ";
                        }
                    }
                    if (seconds > 0) {
                        if (seconds >1)
                        {
                            formattedTime += seconds + " seconds";
                        }else
                        {
                            formattedTime += seconds + " second";
                        }
                    }
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + " starts in " + formattedTime;
                } else if (current === parseInt(start)) {
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + " started!";
                    setTimeout(window.updateChallengeBoard(),1000);
                    var e = new Object;
                    e.title = name + " started!";
                    e.body = name+" started! Eliminate those challenges!";
                    e.button = "Let's go!";
                    CTFd.ui.ezq.ezAlert(e)
                } else if (current < parseInt(end)) {
                    var timeRemaining = parseInt(end) - current;
                    var days = Math.floor(timeRemaining / (24 * 60 * 60)); // 计算剩余天数
                    var hours = Math.floor((timeRemaining % (24 * 60 * 60)) / (60 * 60)); // 计算剩余小时数
                    var minutes = Math.floor((timeRemaining % (60 * 60)) / 60); // 计算剩余分钟数
                    var seconds = timeRemaining % 60; // 计算剩余秒数
                    var formattedTime = "";
                    if (days > 0) {
                        if (days >1)
                        {
                            formattedTime += days + " days ";
                        }else
                        {
                            formattedTime += days + " day ";
                        }
                    }
                    if (hours > 0) {
                        if (hours >1)
                        {
                            formattedTime += hours + " hours ";
                        }else
                        {
                            formattedTime += hours + " hour ";
                        }
                    }
                    if (minutes > 0) {
                        if (minutes >1)
                        {
                            formattedTime += minutes + " minutes ";
                        }else
                        {
                            formattedTime += minutes + " minute ";
                        }
                    }
                    if (seconds > 0) {
                        if (seconds >1)
                        {
                            formattedTime += seconds + " seconds";
                        }else
                        {
                            formattedTime += seconds + " second";
                        }
                    }
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + " ends in " + formattedTime;
                } else if (current === parseInt(end)) {
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + " has ended!";
                    var e = new Object;
                    e.title = name + " has ended!";
                    e.body = "Time is up!";
                    e.button = "okay";
                    CTFd.ui.ezq.ezAlert(e)
                }
            }, 1000)
        }else
        {
            setInterval(function () {
                var current = Date.now();
                current = Math.floor(current / 1000);
                if (current < parseInt(start)) {
                    try {
                        document.getElementById("loading").outerHTML = '';
                    }catch (e)
                    {

                    }
                    var timeRemaining = parseInt(start) - current;
                    var days = Math.floor(timeRemaining / (24 * 60 * 60)); // 计算剩余天数
                    var hours = Math.floor((timeRemaining % (24 * 60 * 60)) / (60 * 60)); // 计算剩余小时数
                    var minutes = Math.floor((timeRemaining % (60 * 60)) / 60); // 计算剩余分钟数
                    var seconds = timeRemaining % 60; // 计算剩余秒数
                    var formattedTime = "";
                    if (days > 0) {
                        formattedTime += days + "天";
                    }
                    if (hours > 0) {
                        formattedTime += hours + "小时";
                    }
                    if (minutes > 0) {
                        formattedTime += minutes + "分";
                    }
                    if (seconds > 0) {
                        formattedTime += seconds + "秒";
                    }
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + "还有" + formattedTime + "开始";
                } else if (current === parseInt(start)) {
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + "开始了！";
                    setTimeout(window.updateChallengeBoard(),1000);
                    var e = new Object;
                    e.title = name + "开始了！";
                    e.body = name+"开始了！快去答题吧！";
                    e.button = "好的";
                    CTFd.ui.ezq.ezAlert(e)
                } else if (current < parseInt(end)) {
                    var timeRemaining = parseInt(end) - current;
                    var days = Math.floor(timeRemaining / (24 * 60 * 60)); // 计算剩余天数
                    var hours = Math.floor((timeRemaining % (24 * 60 * 60)) / (60 * 60)); // 计算剩余小时数
                    var minutes = Math.floor((timeRemaining % (60 * 60)) / 60); // 计算剩余分钟数
                    var seconds = timeRemaining % 60; // 计算剩余秒数
                    var formattedTime = "";
                    if (days > 0) {
                        formattedTime += days + "天";
                    }
                    if (hours > 0) {
                        formattedTime += hours + "小时";
                    }
                    if (minutes > 0) {
                        formattedTime += minutes + "分";
                    }
                    if (seconds > 0) {
                        formattedTime += seconds + "秒";
                    }
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + "还有" + formattedTime + "结束";
                } else if (current === parseInt(end)) {
                    document.getElementById("timer").hidden = false;
                    document.getElementById("timer-text").innerText = name + "已经结束了喵";
                    var e = new Object;
                    e.title = name + "结束了！";
                    e.body = "时间到了哦！";
                    e.button = "好的";
                    CTFd.ui.ezq.ezAlert(e)
                }
            }, 1000)
        }
    </script>
    <div id="main_container" style="display: flex;gap: 10px;" >
        <div style="width:200px;flex: none;" id="pages-board-container">
            <div class="nav flex-column nav-pills category-bar" id="pages-board">
            </div>
        </div>
        <div id='challenges-board' style="padding-right:0;flex: 1;">
            <div class="min-vh-50 d-flex align-items-center" id="loading">
                <div class="text-center w-100">
                    <i class="fas fa-circle-notch fa-spin fa-3x fa-fw spinner"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', path='js/pages/challenges.js') }}"></script>
{% endblock %}
